{% load i18n %}
<div class="dropdown">
  <span role="button" class="btn-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
    <span v-if="chapter.type === 1">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
      </svg>
    </span>
    <span v-if="chapter.type === 2">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-question-mark" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M8 8a3.5 3 0 0 1 3.5 -3h1a3.5 3 0 0 1 3.5 3a3 3 0 0 1 -2 3a3 4 0 0 0 -2 4"></path>
         <line x1="12" y1="19" x2="12" y2="19.01"></line>
      </svg>
    </span>
    <span v-if="chapter.type === 0">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-info" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
         <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
         <path d="M11 14h1v4h1"></path>
         <path d="M12 11h.01"></path>
      </svg>
    </span>
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></svg>
  </span>
  <div class="dropdown-menu dropdown-menu-end" style="">
    <a class="dropdown-item" role="button" @click="add(chapter, 0)">{% translate "Add page" %}</a>
    <a class="dropdown-item" role="button" @click="add(chapter, 1)">{% translate "Add folder" %}</a>
    <a class="dropdown-item" role="button" @click="add(chapter, 2)">{% translate "Add questions" %}</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" role="button" @click="move(chapter, -1)">{% translate "Move up" %}</a>
    <a class="dropdown-item" role="button" @click="move(chapter, 1)">{% translate "Move down" %}</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item text-danger" @click="deleteItem(chapter)" role="button">{% translate "Delete" %}</a>
  </div>
</div>
